<template>
  <div id="history" class="app-container calendar-list-container">
    <div class="filter-container ww-border">
      <p style="line-height: 18px;padding: 10px;box-sizing: border-box;">
        <span class="pull-right" style="margin-top: -8px">
          <el-date-picker class="filter-item"
                          v-model="query.startTime"
                          :format="format"
                          :value-format="format"
                          type="date"
                          placeholder="选择起始日期">
      </el-date-picker>

      <el-date-picker class="filter-item"
                      v-model="query.endTime" type="date"
                      :value-format="format"
                      :format="format"
                      placeholder="选择终止日期">
      </el-date-picker>
        </span>
        <a class="his-title" href="javascript:void();" @click="$router.go('-1')" ><span class="his-jj"><<</span> 流量表{{query.sn}}</a>

      </p>
    </div>
    <el-row class="his-body">
      <el-table class="table-border color-none" :data="list" :row-class-name="tableRowClassName" border
                style="width: 100%" :loading="listLoading">
        <el-table-column type="index" label="No"></el-table-column>
        <el-table-column prop="creation" label="time" align="center"></el-table-column>
        <el-table-column :render-header="headerRender" v-if="item.hide" :key='item.value' align="center"
                         v-for='(item,index) in hisData' :label="item.en" :width="item.width?item.width:80">
          <template slot-scope="scope">
            {{zeroVals(item.value,scope.row[item.value])}}
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination background @current-change="handlePageChange"
                       :current-page.sync="query.pageNumber"
                       :page-sizes="[20, 30, 50]" :page-size="query.pageSize" layout="total,  prev, pager, next"
                       :total="total">
        </el-pagination>
      </div>
    </el-row>
  </div>

</template>

<script>
  import {getHistory} from '../../api/device'
  import {headerData, deviceKeyEnVal, units, zeroVals, hisData1} from '../device/communicate/HeaderData'
  import {fromat} from '../../utils/index'

  export default {
    name: 'history',
    data() {
      return {
        name: '流量表历史记录',
        dates: [],
        query: {
          startTime: '', // yyyy-MM-dd'T'HH:mm:ss.SSSZ
          endTime: '',
          sn: '',
          pageNumber: 1,
          pageSize: 20
        },
        format: 'yyyy-MM-dd HH:mm:ss',
        total: 0,
        list: [],
        formHead: [],
        headerData,
        deviceKeyEnVal,
        hisData: hisData1,
        listLoading: false
      }
    },
    methods: {
      parseTime: fromat,
      tableRowClassName({row, rowIndex}) {
        if (rowIndex % 2 === 0) {
          return 'warning-row'
        }
        return ''
      },
      getHistoryInfo() {
        if (!this.query.sn) {
          this.$message.error('sn不能为空')
          return
        }
        this.listLoading = true
        getHistory(this.query).then(response => {
          this.list = response.data.content
          this.total = response.data.totalElements
          this.listLoading = false
        })
      },
      search() {
        if (!this.query.startTime || !this.query.endTime) {
          this.$message.error('起始时间和终止时间不能为空！')
          return
        }
        this.query.pageNumber = 1
        this.query.pageSize = 20
        this.getHistoryInfo()
      },
      handlePageChange(page) {
        this.query.pageNumber = page
        this.getHistoryInfo()
      }
    },
    created() {
      const now = new Date()
      this.query.endTime = this.parseTime(now, this.format)
      this.query.startTime = this.parseTime(new Date(now.getTime() - 30 * 24 * 3600 * 1000), this.format)
      const obj = JSON.parse(localStorage.getItem('current-items')) || this.headerData
      this.query.sn = this.$route.query.sn.replace(/\%00/g, '')
      if (!this.$route.query.sn) {
        this.$message.error('sn不能为空')
      }
      if (obj) {
        this.formHead = this.headerData
        obj.forEach((val) => {
          if (val.index >= 0) {
            this.formHead.push(this.headerData[val.index])
          }
        })
      }
      this.getHistoryInfo()
    },
    mounted() {
    }
  }
</script>

<style scoped>
  .his-body {
    margin-top: 15px;
  }

  .his-title {
    font-size: 18px;
    color: #00C0F2;
  }

  .his-jj {
    font-weight: bold;
    font-size: 18px;
  }
</style>
